<template>
      <!--最大的父层-->
      <el-row type="flex" justify="center" align="middle" class="row">
        <div class="bg"></div>
        <el-col :span='5' class="form-box">
        <el-row type="flex" justify="center" align="middle">
            <el-col  class="title">
              <h3 style="font-size: 18px;"><i class="el-icon-s-custom" style="font-size: 20px;"></i>绿竹山庄后台管理系统</h3>
            </el-col>
          </el-row>
        <el-row type='flex'  justify="center" align="middle" class="form-body">
          <el-col :span='18'>
            <el-form ref="loginForm" label-position="left" size="small" :rules="rules" :model="user">
              <el-form-item prop="account" label="账号">
                <el-input v-model="user.account" placeholder="请输入账号" clearable>
                  <i class="iconfont icon-yonghuming" slot="prefix"></i>
                </el-input>
              </el-form-item>
              <el-form-item prop="password" label="密码">
                <el-input v-model="user.password" clearable placeholder="请输入密码" show-password>
                  <i class="iconfont icon-mima" slot="prefix"></i>
                </el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" class="btn-login" @click="login('loginForm')">登录</el-button>
              </el-form-item>
            </el-form>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
</template>
<script>
import http from '@/utils/HttpUtil'
export default {
  data () {
    let checkPhone = (rule, value, callback) => {
      let phoneReg = /^1[3456789]\d{9}$/
      if (!phoneReg.test(value)) {
        return callback(new Error('账号必需为手机号格式!'))
      }
      callback()
    }
    let checkPwd = (rule, value, callback) => {
      let pwdReg = /^[a-z0-9_-]{6,18}$/
      if (!pwdReg.test(value)) {
        return callback(new Error('请输入六位数以上的字符'))
      }
      callback()
    }
    return {
      user: {
        account: '',
        password: ''
      },
      rules: {
        account: [{
          required: true, message: '请输入用户名', trigger: 'blur'
        },
        {
          validator: checkPhone, trigger: 'blur'
        }],
        password: [{
          required: true, message: '请输入正确的密码', trigger: 'blur'
        },
        {
          validator: checkPwd, trigger: 'blur'
        }]
      },
      action: {
        login: 'shoes_Web_exploded/User/login',
        rsa: 'shoes_Web_exploded/rsa/generateRSAJsKey'
      },
      newPwd: ''
    }
  },
  components: {

  },
  mounted () {
  },
  methods: {
    login (refName) {
      this.$refs[refName].validate((valid) => {
        if (valid) {
          this.getRsaKey(this.user.password, (res) => {
            let params = {
              account: this.user.account,
              password: res
            }
            http.xhrPost(this, this.action.login, params, (result) => {
              this.$message({
                type: 'success',
                message: result.message,
                duration: 1000
              })
              this.$router.push('/adminindex')
            })
          })
        }
      })
    },
    // 获取密文
    getRsaKey (password, success) {
      http.xhrGet(this, this.action.rsa, null, (res) => {
        console.log(res)
        let keyArr = res.data.split(';')
        // 公钥模板
        let keyModule = keyArr[0]
        // 公钥指数
        let keyExponent = keyArr[1]
        // 生成公钥
        // eslint-disable-next-line no-undef
        let keyPair = RSAUtils.getKeyPair(keyExponent, '', keyModule)
        // 通过密钥加密密码
        password = password.split('').reverse().join('')
        // eslint-disable-next-line no-undef
        let newPwd = RSAUtils.encryptedString(keyPair, password)
        success(newPwd)
      })
    }
  }
}
</script>
<style lang="scss" scoped="scoped">
  @import '../assets/style/common.scss';
  .row {
    height: 100%;
      .bg {
        width: 100%;
        height: 40%;
        background: url(../assets/img/login/login_bg.jpg) no-repeat;
        background-size: 100% 100%;
      }
     .form-box {
        position: absolute;
        height: 55%;
        background-color: #fff;
        border-radius: 5px;
        border: 1px solid #e4e4e4;
        box-shadow: 1px 1px 5px rgba(0,0,0,.5);
        border-top: 5px solid $red;
        .title {
            margin-top: 20px;
            text-align: center;
            h3 {
              color: $red;
              font-size: 16px;
              font-weight: 300;
            }
        }
     }
     .form-body{
       margin-top: 40px;
       i {
          color: $red;
       }
       .btn-login {
         width: 100%;
         height: 30px;
       }
       .outer-chain {
         color: $red;
         i  {
           margin-right: 3px;
         }
       }
     }
  }
</style>
